<template>
	<view class="">
		<scroll-view scroll-y="true" :style="{height: scrollHeight}">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view v-else>
				<u-checkbox-group >
					<view  class="m-2 pl-3 bg-white rounded-20 d-flex" v-for="(item,index) in products" :key='index'>
						<view class="mt-3 pt">
							<u-checkbox @change="checkboxChange" shape="circle" v-model="item.checked"></u-checkbox>
						</view>
						<view class="flex-1">
							<view class="d-flex border-bottom py-3 pr-3">
								<view class="white-space">规格信息</view>
								<view class="ml-6 text-000 ellipsis-1">{{item.label_product_attr}}</view>
							</view>
							<view class="d-flex border-bottom py-3">
								<view class="">规格货号</view>
								<view class="ml-6">
									<input type="text" class="text-999" value="" v-model="products[index].product_sn" :placeholder="item.product_sn?item.product_sn:'请输入规格货号 (选填)'"  />
								</view>
							</view>
							<view class="d-flex border-bottom py-3">
								<view class="">本店售价</view>
								<view class="ml-6">
									<input type="text" class="text-999" value="" v-model="products[index].product_shop_price" :placeholder="item.product_shop_price==0?item.product_shop_price:'请输入本店价格'" />
								</view>
							</view>
							<view class="d-flex border-bottom py-3">
								<view class="mr-3">成本价</view>
								<view class="ml-6">
									<input type="text" class="text-999" value="" v-model="products[index].cost_price" :placeholder="item.cost_price==0?item.cost_price:'请输入成本价'" />
								</view>
							</view>
							<view class="d-flex py-3">
								<view class="">初始库存</view>
								<view class="ml-6">
									<input type="text" class="text-999" value="" v-model="products[index].product_number" :placeholder="item.product_number==0?item.product_number:'请输入库存'" />
								</view>
							</view>
						</view>
					</view>	
				</u-checkbox-group>
			</view>
		</scroll-view>
		<view class="footer"></view>
		<view class="position-fixed bg-white py-2 bottom-0 w-100">
			<view class="py d-flex j-sb btn">
				<view class="d-flex a-center ml-5">
					<u-checkbox-group>
						<u-checkbox @change="checkedAll" size="45" v-model="checked" shape="circle">全部</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="d-flex batch mr-5">
					<view class="" @click="price_to('本店')">本店价</view>
					<view class="" @click="price_to('成本价')">成本价</view>
					<view class="" @click="price_to('库存')">库存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				scrollHeight:0, // 屏幕高度
				goods_id:0, // 商品ID
				u_loadmore:true, // 加载中
				products:"", // 货品列表
				checked:false,
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.footer').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods:{
			// 设置价格
			price_to(e){
				if(e=="本店"){
					let product=this.products.filter(v=>{
						return v.checked?v:""
					})
					if(product.length==0){
						this.$u.toast("你尚未选择货品")
					}else{
						uni.navigateTo({
							url:`/pagesA/goods/spec-price?e=${e}&goods_id=${this.goods_id}`
						})
						uni.setStorageSync("products",JSON.stringify(product))
					}
				}else if(e=="成本价"){
					let product=this.products.filter(v=>{
						return v.checked?v:""
					})
					if(product.length==0){
						this.$u.toast("你尚未选择货品")
					}else{
						uni.navigateTo({
							url:`/pagesA/goods/spec-price?e=${e}&goods_id=${this.goods_id}`
						})
						uni.setStorageSync("products",JSON.stringify(product))
					}
				}else if(e=="库存"){
					let product=this.products.filter(v=>{
						return v.checked?v:""
					})
					if(product.length==0){
						this.$u.toast("你尚未选择货品")
					}else{
						uni.navigateTo({
							url:`/pagesA/goods/spec-stock?e=${e}&goods_id=${this.goods_id}`
						})
						uni.setStorageSync("products",JSON.stringify(product))
					}
				}
			},
			// 复选
			checkboxChange(e){
				this.$nextTick(function(){
					let arr=this.products.reduce((acc,v)=>{
						if(v.checked){
							acc.push(v)
						}
						return acc
					},[])
					console.log(arr)
					if(arr.length==this.products.length){
						this.checked=true
					}else{
						this.checked=false
					}
				})
			},
			// 全选
			checkedAll(e) {
				console.log(e)
				if(e.value){
					this.products.map(val => {
						val.checked = true;
					})
				}else{
					this.products.map(val => {
						val.checked = false;
					})
				}
			}
		},
			
		onShow() {
			this.checked=false
			this.$H.post("v2/store/goods/products",{
				goods_id:this.goods_id
			}).then(res=>{
				this.products=res.data.reduce((acc,item)=>{
					acc.push({
						...item,
						checked:false
					})
					return acc
				},[])
			})
		},
		onLoad(e) {
			this.goods_id=e.goods_id
			this.$H.post("v2/store/goods/products",{
				goods_id:this.goods_id
			}).then(res=>{
				this.products=res.data.reduce((acc,item)=>{
					acc.push({
						...item,
						checked:false
					})
					return acc
				},[])
				console.log(this.products)
				this.u_loadmore=false
			})
		}
	}
</script>

<style>
	.batch view{
		padding: 15upx 30upx;
		color: #FF0000;
		border: 1px solid #FF0000;
		border-radius: 50upx;
		margin-left: 20upx;
	}
</style>
